import React, { useEffect } from 'react';
import {
  Form,
  Input,
  Button,
  Switch,
  Space,
  Row,
  Col,
  Divider
} from 'antd';
import {
  SaveOutlined,
  ApiOutlined,
  EnvironmentOutlined,
  GlobalOutlined
} from '@ant-design/icons';

const { TextArea } = Input;

const BasicInfoForm = ({ network, isSubmitting, onSubmit }) => {
  const [form] = Form.useForm();

  // 设置表单初始值
  useEffect(() => {
    if (network) {
      form.setFieldsValue({
        name: network.name,
        description: network.description,
        physicalAddress: network.physicalAddress,
        isPublic: network.isPublic
      });
    }
  }, [network, form]);

  const handleFinish = (values) => {
    onSubmit(values);
  };

  const handleReset = () => {
    if (network) {
      form.setFieldsValue({
        name: network.name,
        description: network.description,
        physicalAddress: network.physicalAddress,
        isPublic: network.isPublic
      });
    }
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={handleFinish}
      initialValues={{
        name: network?.name || '',
        description: network?.description || '',
        physicalAddress: network?.physicalAddress || '',
        isPublic: network?.isPublic || false
      }}
    >
      <Row gutter={16}>
        <Col span={24}>
          <Form.Item
            label="局域网名称"
            name="name"
            rules={[
              { required: true, message: '请输入局域网名称' },
              { max: 100, message: '局域网名称不能超过100个字符' }
            ]}
          >
            <Input 
              placeholder="输入局域网名称"
              prefix={<ApiOutlined />}
              size="large"
            />
          </Form.Item>
        </Col>
      </Row>

      <Form.Item
        label="描述"
        name="description"
        rules={[
          { max: 500, message: '描述不能超过500个字符' }
        ]}
      >
        <TextArea
          placeholder="描述这个局域网的用途和特点（可选）"
          rows={4}
          showCount
          maxLength={500}
        />
      </Form.Item>

      <Form.Item
        label="物理地址"
        name="physicalAddress"
        rules={[
          { max: 255, message: '物理地址不能超过255个字符' }
        ]}
      >
        <Input
          placeholder="输入局域网的物理地址（可选）"
          prefix={<EnvironmentOutlined />}
          size="large"
        />
      </Form.Item>

      <Form.Item
        label="网络类型"
        name="isPublic"
        valuePropName="checked"
        tooltip="此设置决定网络是否对外开放。公网：其他用户可以搜索并申请加入；内网：仅限邀请加入"
      >
        <div>
          <Switch 
            checkedChildren="公网"
            unCheckedChildren="内网"
            size="default"
            onChange={(checked) => {
              form.setFieldValue('isPublic', checked);
            }}
          />
          <div style={{ marginTop: 8, color: '#666', fontSize: '14px' }}>
            当前状态: {form.getFieldValue('isPublic') ? '公网模式' : '内网模式'} - 
            {form.getFieldValue('isPublic') 
              ? '其他用户可以搜索并申请加入此局域网' 
              : '此局域网仅限邀请加入，其他用户无法主动搜索'}
          </div>
        </div>
      </Form.Item>

      <Form.Item className="form-actions">
        <Space>
          <Button 
            type="primary" 
            htmlType="submit"
            size="large"
            icon={<SaveOutlined />}
            loading={isSubmitting}
            className="submit-btn"
          >
            保存基本信息
          </Button>
          <Button 
            size="large" 
            onClick={handleReset}
            disabled={isSubmitting}
            className="reset-btn"
          >
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default BasicInfoForm;